<template>
	<scroll-view scroll-y class="public-scroll-view">
		<view class="input-model">
			<text class="input-model-title">可自动聚焦的input</text>
			<input class="input-component" focus placeholder="自动获得焦点" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">键盘右下角按钮显示为搜索input</text>
			<input class="input-component" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">控制最大输入长度的input</text>
			<input class="input-component" maxlength="10" placeholder="最大输入长度为10" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">数字输入的input</text>
			<input class="input-component" type="number" placeholder="这是一个数字输入框" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">密码输入的input</text>
			<input class="input-component" focus placeholder="自动获得焦点" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">带小数点的input</text>
			<input class="input-component" type="digit" placeholder="带小数点的数字键盘" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">身份证输入的input</text>
			<input class="input-component" type="idcard" placeholder="身份证输入键盘" />
		</view>
		
		<view class="input-model">
			<text class="input-model-title">控制占位符颜色的input</text>
			<input class="input-component" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
		</view>
		
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.input-model {
		padding-top: 20rpx;
	}

	.input-model-title {
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.input-component {
		background-color: white;
		height: 80rpx;
		padding-left: 20rpx;
		margin-top: 20rpx;
	}
</style>